<template>
    <div class="home-classic">
        <h3>网友精选歌单（最新）</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index" @click="selectItem()">
                    <div class="cover">
                        <!-- <img :src="item.picUrl" /> -->
                        <van-image :src="item.picUrl" radius='1rem' fit="contain"/>
                        <span>{{ item.playCount | numFilter(2) }}万</span>
                    </div>
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
import { betterScrollHorizontal } from '../../common/betterScroll.js'

export default {
    data() {
        return {
            listData: [],
            id: 1,
            pageNo: 1,
            pageSize: 10
        }
    },
    created() {
        this.getSongListData(this.id, this.pageNo, this.pageSize);
    },
    methods: {
        //获取歌单数据
        getSongListData() {
            this.$request("get", "/personalized", {
                id: this.$route.params.id
            })
                .then(res => {
                    // console.log(res)
                    this.listData = res.result
                    // console.log(this.listData)
                    //异步数据的处理
                    betterScrollHorizontal(this, this.$refs.wrapper, this.$refs.content, this.listData.length, 8)

                })
        },
        selectItem() {
            // const id = item.id;//获取歌单id
            // console.log(id);
            //编程式导航，带路由的对象方式
            this.$router.push({ path: `/FinishSong` })
        },
    },
}
</script>


<style scoped>
.cover {
    position: relative;
}

.cover>span {
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background-color: #a6a0a0;
    border-radius: 1rem;
    color: white;
    font-size: 0.9rem;
    width: 5rem;
}

.wrapper {
    width: 100%;
    /* 容器的宽度就是屏幕的宽度 */
    overflow: hidden;
}

/* ul.content {
    width: calc(12*8rem);
} */

ul.content>li {
    width: 8rem;
    display: inline-block;
    vertical-align: top;
    /**垂直方向的对齐方式 */
}

ul.content li * {
    margin: 0 0.2rem;
}

ul.content>li>span {
    font-size: 0.8rem;
}

.home-classic>h3 {
    text-align: left;
    margin-left: 1rem;
}

.content:first-child {
    padding-left: 0
}

.home-classic{
    margin-top: 2rem;
}
</style>